<!-- 任务编辑弹窗 -->
<template>
  <el-dialog
    :title="isUpdate?'修改任务':'添加任务'"
    :visible="visible"
    width="60%"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      >
       <el-row :gutter="15">
         <el-col :sm="12">
           <el-form-item label="所属组织:" prop="organization">
               <el-select
                 filterable
                 clearable
                 v-model="form.organization"
                 @change="getDepartmentsList"
                 size="small"
                 placeholder="-请选择所属组织-"
                 class="ele-block">
                 <el-option v-for="item in schoolList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
           </el-form-item>
           <el-form-item label="所属院系:" ref="superior" prop="superior">
               <el-select
                 filterable
                 clearable
                 v-model="form.superior"
                 @change="getClassList"
                 size="small"
                 placeholder="-请选择院系-"
                 class="ele-block">
                 <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
           </el-form-item>
           <el-form-item label="班级:" prop="class">
               <el-select
                 multiple
                 v-model="form.class"
                 @change="$forceUpdate()"
                 size="small"
                 placeholder="-请选择班级-"
                 class="ele-block">
                 <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
           </el-form-item>
           <el-form-item
             label="任务名称:"
             prop="name">
             <el-input
               :maxlength="20"
               v-model="form.name"
               placeholder="请输入任务名称"
               clearable/>
           </el-form-item>
           <!-- <el-form-item label="任务编号:" prop="code">
             <el-input
               clearable
               v-model="form.code"
               placeholder="请输入任务编号"/>
           </el-form-item>
           <el-form-item label="任务类型:" prop="type">
             <el-select
               clearable
               class="ele-block"
               v-model="form.type"
               placeholder="请选择任务类型">
                       <el-option label="考试任务" :value="1"/>
                       <el-option label="日常练习" :value="2"/>
                     </el-select>
           </el-form-item> -->
         </el-col>
         <el-col :sm="12">
           <el-form-item label="年级:" prop="grade">
               <el-select
                 filterable
                 clearable
                 v-model="form.grade"
                 @change="getClassList"
                 size="small"
                 placeholder="-请选择年级-"
                 class="ele-block">
                 <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
           </el-form-item>
           <el-form-item label="体育专业:" prop="professional">
               <el-select
                 clearable
                 v-model="form.professional"
                 @change="$forceUpdate()"
                 size="small"
                 placeholder="-请选择专业-"
                 class="ele-block">
                 <el-option v-for="item in professionalList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
           </el-form-item>
           <el-form-item label="项目:" ref="project" prop="project">
               <el-select
                 clearable
                 v-model="form.project"
                 @change="$forceUpdate()"
                 size="small"
                 placeholder="-请选择项目-"
                 class="ele-block">
                 <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
           </el-form-item>
           <el-form-item label="模式:" prop="model">
             <el-select
               clearable
               class="ele-block"
               v-model="form.model"
               placeholder="请选择模式">
               <el-option label="测试模式" :value="0"/>
               <el-option label="训练模式" :value="1"/>
             </el-select>
           </el-form-item>
           <!-- <el-col :sm="8">

           </el-col> -->
           <!-- <el-col :sm="16"> -->
            <!-- <el-col :sm="12">

              </el-col> -->
              <!-- <el-col :sm="12">
              <el-form-item label="特色班:" prop="features">
                  <el-select
                    filterable
                    clearable
                    v-model="form.features"
                    size="small"
                    placeholder="-请选择特色班-"
                    @change="getMemberList"
                    class="ele-block">
                    <el-option label="学籍班" :value="0" />
                    <el-option v-for="item in featuresList" :key="item.id" :label="item.name" :value="item.id"/>
                  </el-select>
              </el-form-item>
              </el-col> -->
           <!-- </el-col> -->
           <!-- <el-col :sm="24">


           </el-col> -->
         </el-col>

       </el-row>
       <el-row :gutter="15">
         <el-col :sm="24">
           <el-col :lg="8" :md="12">
           <el-form-item label="任务时间:" prop="task_start">
               <el-date-picker
               type="datetime"
               class="ele-fluid"
               v-model="form.task_start"
               value-format="yyyy-MM-dd HH:mm:ss"
               format="yyyy-MM-dd HH:mm:ss"
               placeholder="请选择开始日期"/>
             </el-form-item>
             </el-col>
             <el-col :lg="2" :md="12">
               至
             </el-col>
             <el-col :lg="8" :md="12">
             <el-form-item prop="task_end">
               <el-date-picker
               type="datetime"
               class="ele-fluid"
               v-model="form.task_end"
               value-format="yyyy-MM-dd HH:mm:ss"
               format="yyyy-MM-dd HH:mm:ss"
               placeholder="请选择结束日期"/>
              </el-form-item>
              </el-col>
         </el-col>
       </el-row>
       <!-- <div style="margin: 6px 0 5px 0;">
         <el-header>考核标准</el-header>
       </div> -->
       <!-- <el-row justify="center" align="middle" style="height: 2vw;">
           <el-col style="text-align: center;" :sm="8">
             考核标准
           </el-col>
           <el-col style="text-align: center;" :sm="16">
             目标值
           </el-col>
       </el-row> -->
       <el-row :gutter="15">
            <el-col style="text-align: center;" :sm="8">
               <el-form-item label="考核标准:" ref="standard" prop="standard">
                   <el-select
                     filterable
                     clearable
                     v-model="form.standard"
                     @change="getStandardDetail"
                     size="small"
                     placeholder="-请选择考核标准-"
                     class="ele-block">
                     <el-option v-for="item in standardList" :key="item.id" :label="item.name" :value="item.id"/>
                   </el-select>
               </el-form-item>
            </el-col>
            <el-col style="text-align: center; border: 1px #ccc solid; height:200px; overflow:scroll" :sm="16">
              <el-row :gutter="15">
                <el-col :sm="12">
                  <el-form-item label="考核标准名称:">
                    <div class="ele-text-secondary">
                      {{ standardarr.name }}
                    </div>
                  </el-form-item>
                  <el-form-item label="备注:">
                    <div class="ele-text-secondary">
                      {{ standardarr.note }}
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :sm="12">
                  <el-form-item label="所属学校:">
                    <div class="ele-text-secondary">
                      {{ standardarr.organization_name }}
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <div style="margin: 12px 0;">
                <el-divider/>
              </div>
              <el-row justify="center" align="middle" style="height: 2vw;">
                  <el-col style="text-align: center;" :sm="2">
                  序号
                  </el-col>
                  <el-col style="text-align: center;" :sm="3">
                    性别
                  </el-col>
                  <el-col style="text-align: center;" :sm="3">
                    计算
                  </el-col>
                  <el-col style="text-align: center;" :sm="6">
                    目标值
                  </el-col>
                  <el-col style="text-align: center;" :sm="3">
                    单位
                  </el-col>
                  <el-col style="text-align: center;" :sm="3">
                    考核等级
                  </el-col>
                  <el-col style="text-align: center;" :sm="3">
                    考核分数
                  </el-col>
              </el-row>
              <el-row :gutter="15"
               v-for="(item, index) in standardarr.standard"
                      :key="index"
                      style="margin-left: 0.5vw"
                      >
              <el-col :sm="2">
                <el-form-item label-width="0">
                  {{index+1}}
                </el-form-item>
                </el-col>
              <el-col :sm="3">
                  <el-form-item label-width="0">
                    {{ item.sex==1?'男':'女' }}
                  </el-form-item>
                </el-col>
                <el-col :sm="3">
                  <el-form-item label-width="0">
                     {{ item.conditions=='gt'?'大于':''}}
                     {{ item.conditions=='egt'?'大于等于':''}}
                     {{ item.conditions=='lt'?'小于':''}}
                     {{ item.conditions=='elt'?'小于等于':''}}
                     {{ item.conditions=='between'?'范围':''}}
                  </el-form-item>
                </el-col>
                <el-col :sm="6">
                    <el-form-item label-width="0">
                      <el-col :sm="12">
                          {{ item.target[0]}}
                        </el-col>
                        <el-col :sm="12">
                        {{ item.target[1]}}
                          </el-col>
                    </el-form-item>
                </el-col>
                <el-col :sm="3" label-width="0">
                  {{ item.unit=='s'?'秒(s)':''}}
                  {{ item.unit=='time'?'次(time)':''}}
                </el-col>
                <el-col :sm="3">
                  <el-form-item label-width="0">
                    {{ item.level=='1'?'优秀':''}}
                    {{ item.level=='2'?'良好':''}}
                    {{ item.level=='3'?'及格':''}}
                    {{ item.level=='0'?'不及格':''}}
                  </el-form-item>
                </el-col>
                <el-col :sm="3">
                  <el-form-item label-width="0">
                    {{ item.score}}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
       </el-row>
       <el-row :gutter="15">
         <el-form-item label="显示顺序:" prop="sort">
           <el-input-number
             :min="0"
             v-model="form.sort"
             placeholder="请输入显示顺序"
             controls-position="right"
             class="ele-fluid ele-text-left"/>
         </el-form-item>
       </el-row>
       <el-row :gutter="15">
         <el-col :sm="24">
         <el-form-item label="状态:">
           <el-radio-group
             v-model="form.status">
                     <el-radio :label="1">正常</el-radio>
                     <el-radio :label="2">停用</el-radio>
                   </el-radio-group>
         </el-form-item>
         </el-col>
      </el-row>
      <!-- <div style="margin: 6px 0 5px 0;">
        <el-header type="primary">参数人员</el-header>
      </div> -->
      <!-- <el-row :gutter="15">
        <el-col :sm="24">
           <el-row style="display: flex;">
                      <el-col :sm="11" style="border: 1px solid #ebeef5;">
                        <div style="padding: 5px 15px 10px; background-color: #f5f7fa; border-radius: 3px;">
                          <el-form-item label-width="0">
                            <span style="float: left;">未选列表</span>
                            <span style="float: right;">{{ listArr.length }}</span>
                            <el-table :data="listArr" style="width: 100%;" border height="393" @selection-change="checkAll">
                              <el-table-column align="center" type="selection"></el-table-column>
                              <el-table-column prop="id" label="uid"></el-table-column>
                              <el-table-column prop="organization" label="所属组织"></el-table-column>
                              <el-table-column prop="superior" label="所属院系"></el-table-column>
                              <el-table-column prop="class" label="所属班级"></el-table-column>
                              <el-table-column prop="name" label="姓名"></el-table-column>
                              <el-table-column prop="sex" label="性别"></el-table-column>
                            </el-table>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :sm="2" style="padding: 0 10px; display: flex; flex-direction: column; justify-content: center; ">

                        <div style="display: flex; justify-content: center;">
                          <el-button class="middle-circle" icon="el-icon-arrow-right" :disabled="!leftData.length" size="mini" type="primary" @click="handelSelect" />
                        </div>

                        <div style="display: flex; justify-content: center;">
                          <el-button class="middle-circle" icon="el-icon-arrow-left" :disabled="!rightData.length" size="mini" type="primary" style="margin-top: 10px; margin-left: 0px;" @click="handleRemoveSelect" />
                        </div>
                      </el-col>
                      <el-col :sm="11" style="border: 1px solid #ebeef5;">
                        <div style="padding: 5px 15px 10px; background-color: #f5f7fa; border-radius: 3px;">
                          <el-form-item label-width="0">
                            <span style="float: left;">已选列表</span>
                            <span style="float: right;">{{ selectArr.length }}</span>
                            <el-table :data="selectArr" style="width: 100%;" border height="393" @selection-change="checkRightAll">
                              <el-table-column align="center" type="selection"></el-table-column>
                              <el-table-column prop="id" label="uid"></el-table-column>
                              <el-table-column prop="organization" label="所属组织"></el-table-column>
                              <el-table-column prop="superior" label="所属院系"></el-table-column>
                              <el-table-column prop="class" label="所属班级"></el-table-column>
                              <el-table-column prop="name" label="姓名"></el-table-column>
                              <el-table-column prop="sex" label="性别"></el-table-column>
                            </el-table>
                          </el-form-item>
                        </div>
                      </el-col>
                    </el-row>
        </el-col>
      </el-row> -->
          </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading">发布
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
// import uploadImage from '@/components/uploadImage'

export default {
  name: 'TaskEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {},
  data() {
    return {
      // 表单数据
      form: Object.assign({status:1}, this.data),
      // 表单验证规则
      rules: {
              code: [
          {required: true, message: '请输入编号', trigger: 'blur'}
        ],
                  name: [
          {required: true, message: '请输入任务名称', trigger: 'blur'}
        ],
                  organization: [
          {required: true, message: '请选择所属组织', trigger: 'blur'}
        ],
                  superior: [
          {required: true, message: '请选择所属院系', trigger: 'blur'}
        ],

        status: [
          {required: true, message: '请选择任务状态', trigger: 'blur'}
        ],
                          class: [
          {required: true, message: '请选择所属班级', trigger: 'blur'}
        ],

        grade: [
          {required: true, message: '请选择年级', trigger: 'blur'}
        ],

        professional: [
          {required: true, message: '请选择专业', trigger: 'blur'}
        ],

        project: [
          {required: true, message: '请选择项目', trigger: 'blur'}
        ],

        model: [
          {required: true, message: '请选择模式', trigger: 'blur'}
        ],

        // features: [
        //   {required: true, message: '请输入特色班', trigger: 'blur'}
        // ],

        // type: [
        //   {required: true, message: '请选择任务类型', trigger: 'blur'}
        // ],
                          task_start: [
          {required: true, message: '请输入任务开始时间', trigger: 'blur'}
        ],
                  task_end: [
          {required: true, message: '请输入任务结束时间', trigger: 'blur'}
        ],
        //           munumber: [
        //   {required: true, message: '请输入目标人数', trigger: 'blur'}
        // ],
        //           actualnumber: [
        //   {required: true, message: '请输入实际参与人数', trigger: 'blur'}
        // ],
                  sort: [
          {required: true, message: '请输入显示顺序', trigger: 'blur'}
        ],
                  note: [
          {required: true, message: '请输入备注', trigger: 'blur'}
        ],
            },
      searchParam: {},
      listArr: [],
      selectArr: [],
      changeArr: [],
      leftData: [], // 左边选中列表数据
      rightData: [], // 右边选中列表数据
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 学院列表
      schoolList: [],
      // 父级院系列表
      departmentsList: [],
      // 班级列表
      classList: [],
      // 特色班列表
      // featuresList: [],
      // 年级列表
      gradeList: [],
      // 专业列表
      professionalList: [],
      // 项目列表
      projectList: [],
      // 考核列表
      standardList: [],
      // 考核详情
      standardarr: [],
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        // this.form.class = JSON.parse(this.form.class);
        console.log(this.form.class);
        //this.selectArr = this.form.students;
        // 获取班级列表
        this.getClassList();
        this.getGradeList();
        this.getProfessionalList();
        this.getProjectList();
        this.getStandardList();
        // this.getStandardDetail();
        this.isUpdate = true;
      } else {
        this.form = {status:1};
        this.standardarr = [];
        this.listArr = [];
        this.changeArr = [];
        this.selectArr = [];
        this.isUpdate = false;
      }
    }
  },
  mounted() {
    // 获取学院列表
    this.getSchoolList();
    // 获取父级院系列表
    this.getDepartmentsList();
    // 获取班级列表
    // this.getClassList();
    // 获取年级列表
    // this.getGradeList();
    // // 获取专业列表
    // this.getProfessionalList();
    // //获取项目列表
    // this.getProjectList();
    // 获取考核列表
    // this.getStandardList();
    // this.getStandardDetail();
  },
  methods: {
     checkAll(val) {
        this.leftData = val;
      },
      checkRightAll(val) {
        this.rightData = val;
      },
      // 穿梭框选中
      handelSelect() {
        for (let i = 0; i < this.selectArr.length; i++) {
          for (let j = 0; j < this.leftData.length; j++) {
            if (this.leftData[j].id === this.selectArr[i].id) {
              this.leftData = []; // 避免 左边勾选内容 leftData 与 右边内容 selectArr 重复
            }
          }
        }
        this.selectArr = this.handleConcatArr(
          this.selectArr,
          this.leftData
        );
        this.handleRemoveTabList(this.leftData, this.listArr);
        this.leftData = [];
      },
      // 穿梭框取消
      handleRemoveSelect() {
        this.listArr = this.handleConcatArr(this.listArr, this.rightData);
        this.handleRemoveTabList(this.rightData, this.selectArr);
        this.rightData = [];
      },
      handleConcatArr(selectArr, leftData) {
        let arr = [];
        arr = arr.concat(selectArr, leftData);
        return arr;
      },
      handleRemoveTabList(isNeedArr, originalArr) {
        if (isNeedArr.length && originalArr.length) {
          for (let i = 0; i < isNeedArr.length; i++) {
            for (let k = 0; k < originalArr.length; k++) {
              if (isNeedArr[i]["id"] === originalArr[k]["id"]) {
                originalArr.splice(k, 1);
              }
            }
          }
        }
      },
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.form.class = JSON.stringify(this.form.class.map(num => num.toString()));
          this.$http.post('/task/edit', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /**
     * 获取组织列表
     */
    getSchoolList() {
      this.$http.get('/school/getSchoolList').then(res => {
        if (res.data.code === 0) {
          this.schoolList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

    /**
     * 获取院系列表
     */
    getDepartmentsList() {
      if(this.form.organization){
        this.form.superior = null;
        this.form.class = null;
        this.$forceUpdate();
        this.getGradeList();
        this.getStandardList();
        this.getProjectList();
      }
      this.$http.post('/departments/getDepartmentsList',{sid:this.form.organization,type:2}).then(res => {
        if (res.data.code === 0) {
          this.departmentsList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

    /**
     * 获取班级列表
     */
    getClassList() {
      if(this.form.superior){
        // this.form.class = null;
        this.listArr = [];
        this.$forceUpdate();
        this.getProfessionalList();
      }
      this.$http.post('/clss/getClassList',{gid:this.form.grade,yid:this.form.superior}).then(res => {
        if (res.data.code === 0) {
          this.classList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取年级列表
     */
    getGradeList() {
      if(this.form.grade){
        this.$forceUpdate();
      }
      this.$http.post('/grade/getGradeList',{oid:this.form.organization}).then(res => {
        if (res.data.code === 0) {
          this.gradeList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取专业列表
     */
    getProfessionalList() {
      if(this.form.professional){
        this.$forceUpdate();
      }
      this.$http.post('/professional/getProfessionalList',{sid:this.form.superior}).then(res => {
        if (res.data.code === 0) {
          this.professionalList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取运动项目列表
     */
    getProjectList() {
      if(this.form.organization){
        this.$forceUpdate();
      }
      this.$http.post('/project/getProjectList',{oid:this.form.organization}).then(res => {
        if (res.data.code === 0) {
          this.projectList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取特色班列表
     */
    getFeaturesList() {
      if(this.form.class){
        this.$forceUpdate();
        this.getMemberList();
      }
      this.$http.post('/clss/getFeaturesList',{id:this.form.class}).then(res => {
        if (res.data.code === 0) {
          this.featuresList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 获取考核列表
     */
    getStandardList() {
      if(this.form.organization){
        this.$forceUpdate();
      }
      this.$http.post('/standard/getStandardList',{oid:this.form.organization}).then(res => {
        if (res.data.code === 0) {
          this.standardList = res.data.data;
          if(this.form.standard){
            this.standardarr = this.standardList.find(item => item.id === this.form.standard);
          }
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /**
     * 考核标准详情
     */
    getStandardDetail() {
      this.standardarr = this.standardList.find(item => item.id === this.form.standard);
    },

    /**
     * 获取考核列表
     */
    getMemberList() {
      if(this.form.class){
        this.$forceUpdate();
      }
      this.$http.post('/member/getMemberList',{class:this.form.class,'features':this.form.features}).then(res => {
        if (res.data.code === 0) {
          this.listArr = res.data.data;
          this.changeArr = [];
          this.selectArr = [];
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  }
}
</script>

<style scoped>
</style>
